<template>
  <div class="banner-wrap" :style="{height: `${bHeight}px`}" @mouseenter="onStop" @mouseleave="onGo" :class="{'themes2': themes == 2}">
    <transition-group tag="ul" name="bannerlist">
      <li v-for="(list, index) in lists" :key="index" v-show="index === currentIndex" @click="clearSearchParams">
        <!-- <p class="titleName" v-text="list.titleName" v-if="list.titleName"></p> -->
        <p class="desc" v-text="list.subTitle" v-if="list.subTitle"></p>
        <a v-lazy:background-image="list.image || list.img" @click="onToNewTab(list.type, list.value)">
          <!-- <img v-lazy="list.image"> -->
        </a>
      </li>
    </transition-group>
    <p class="dots" v-if="lists.length > 1">
      <span v-for="(item, index) in lists" 
        :key="index" 
        :class="{actived: index === currentIndex}" 
        @mouseover="onChange(index)">
      </span>
    </p>
  </div>
</template>

<script>
  import { mapActions } from 'vuex'
  export default {
    props: {
      lists: {
        type: Array,
        default() {
          return [
            {
              link: '#',
              image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501588650083&di=5506527b23e1dba8883843ec9209d79d&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01893455fecd8f32f875a1320acdca.jpg%40900w_1l_2o_100sh.jpg'
            }
          ]
        }
      },
      themes: {
        type: [Number, String],
        default: 1
      },
      height: {
        type: Number,
        default: 420
      },
      duration: {
        type: Number,
        default: 3000
      }
    },
    data() {
      return {
        currentIndex: 0,
        timer: '',
        btnShow: false,
        bHeight: this.height,
        dotTimer: null
      }
    },
    created() {
      this.$nextTick(() => {
        this.timer = setInterval(() => {
          this.autoPlay()
        }, this.duration)
      })
    },
    methods: {
      ...mapActions(['fetchSerachGoods']),
      // 展示弹框
      showShadeVideo(flag) {
        this.$emit('shade', flag)
      },
      onGo() {
        this.timer = setInterval(() => {
          this.autoPlay()
        }, this.duration)
        this.btnShow = false
      },
      onStop() {
        clearInterval(this.timer)
        this.timer = null
        this.btnShow = true
      },
      onChange(index) {
        clearTimeout(this.dotTimer)
        this.dotTimer = setTimeout(() => {
          this.currentIndex = index
        }, 300)
      },
      autoPlay() {
        this.currentIndex++
        if (this.currentIndex > this.lists.length - 1) {
          this.currentIndex = 0
        }
      },
      onToNewTab(type, val) {
        if (type == '') return
        switch (type) {
          case 'goodsInfo': // 进入商品详情
            window.open('/goods/detail/' + val)
            break
          case 'channel': // 频道
            this.$emit('on-channel', val)
            break
          case 'store': // 进入店铺
            window.open('/shop/' + val)
            break
          case 'link': // 进入链接
            window.open(val.replace('/#', ''))
            break
          case 'goodsList': // 进入商品列表
            sessionStorage.setItem('goodsIds', val)
            window.open('/search/goodsLists')
            break
          case 'storeSearch':
            // param = {
            //   keyWord: val,
            //   gcIdThird: '',
            //   gcIdSecond: '',
            //   goodsPro: '',
            //   searchType: 'store',
            //   currentPage: 1
            // }
            // sessionStorage.removeItem('keyword')
            // this.$store.commit('resetParam')
            // this.$store.commit('updateparam', param)
            this.fetchSerachGoods()
            window.open(`/search/stores?type=stores&key=${val}`)
            break
          case 'searchInStore':
            window.open(val)
            break
          default:
            if (type == 'brandSearch') {
              // param = {
              //   brandName: val,
              //   gcIdThird: '',
              //   gcIdSecond: '',
              //   goodsPro: '',
              //   searchType: 'goods',
              //   currentPage: 1
              // }
              window.open(`/search/goods?type=goods&name=${val}&ob=`)
            } else {
              // param = {
              //   keyWord: val,
              //   gcIdThird: '',
              //   gcIdSecond: '',
              //   goodsPro: '',
              //   searchType: 'goods',
              //   currentPage: 1
              // }
              window.open(`/search/goods?type=goods&key=${val}&ob=`)
            }
            // sessionStorage.removeItem('keyword')
            // this.$store.commit('resetParam')
            // this.$store.commit('updateparam', param)
            this.fetchSerachGoods()
            // window.open('/search/goods')
        }
      },
      /**
       * 清空搜素条件
       */
      clearSearchParams() {
        // this.$store.commit('resetParam')
      }
    }
  }
</script>

<style lang="scss">
  .banner-wrap {
    position: relative;
    overflow: hidden;
    background-color: transition;
    ul {
      width: 100%;
      height: 100%;
      li {
        position: absolute;
        width: 100%;
        height: 100%;
        .titleName{
          position: relative;
          z-index: 2;
          width: 100%;
          // height: 24px;
          color: #404040;
          font-size: 22px;
          text-align: center;
          margin: 20px 0 5px 0;
        }
        .desc{
          position: absolute;
          bottom: 10px;
          z-index: 2;
          width: 100%;
          // height: 24px;
          color: #404040;
          font-size: 14px;
          text-align: center;
          margin: 20px 0 5px 0;

        }
        a {
          display: block;
          width: 100%;
          height: 100%;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: auto 100%;
          cursor: pointer;
        }
        img {
          margin: 0 auto;
          width: auto;
          height: 100%;
        }
      }
    }
    .dots {
      position: absolute;
      z-index: 4;
      bottom: 50px;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 0;
      span {
        display: inline-block;
        width: 14px;
        height: 14px;
        margin: 0 8px;
        background: #000;
        border: 1px solid #535353;
        border-radius: 7px;
        cursor: pointer;
        &.actived {
          background: #fff;
          border-color: #fff;
        }
      }
    }

    &.themes2 {
      
    }
  }
  .bannerlist-enter-active {
    transition: all .3s ease;
    transform: translateX(0)
  }
  .bannerlist-leave-active {
    transition: all .3s ease;
    transform: translateX(-100%)
  }
  .bannerlist-enter {
    transform: translateX(100%)
  }
  .bannerlist-leave {
    transform: translateX(0)
  }
</style>